<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no viewport-fit=cover" />
		<link rel="stylesheet" href="../Common/css/lib/materialize.min.css">
		<link rel="stylesheet" href="../Common/css/lib/minirefresh.css" />
		<link rel="stylesheet" href="../Common/css/lib/minirefresh.theme.applet.css" />
		<link rel="stylesheet" href="../Common/css/lib/swiper.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<link rel="stylesheet" href="../Common/css/ufun.css" />
		<link rel="stylesheet" href="../Common/css/table-list.css" />
		<script src="../Common/js/lib/minirefresh.js"></script>
		<script src="../Common/js/lib/minirefresh.theme.applet.js"></script>
		<script src="../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../Common/js/lib/materialize.min.js"></script>
		<script src="../Common/js/lib/swiper.js"> </script>
		<script src="../Common/js/table-list.js"></script>
		<script src="../Common/js/jump.js"></script>
		<script src="../Common/js/tools.js"></script>
		<title>问题着陆页</title>
	</head>
	
	<style type="text/css">
		#TopAdsBar {
			width: 100%;
			height: 16vw;
			background: var(--color-white);
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 3vw;
			padding-right: 6vw;
		}
		
		#HanShuAdsLogo {
			height: 15vw;
		}
		
		#DownloadHanshu {
			background: var(--color-yellow);
			height: 8vw;
			width: 22vw;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 2vw;
			size: 4vw;
		}
		
		#QuestionInfoBar {
			background: var(--color-gray-white);
			height: 20vw;
			align-items: center;
			display: flex;
		}
		
		#LeftYellowPart {
			width: 30%;
			height: 10vw;
			background: var(--color-yellow);
			align-items: center;
			display: flex;
			padding-left: 6vw;
		}
		
		#RightGrayPart {
			width: 70%;
			height: 10vw;
			background: var(--color-gray-dark);
			align-items: center;
			display: flex;
			justify-content: flex-end;
		}
		
		.right {
			height: inherit;
			align-items: center;
			display: flex;
			padding-right: 6vw;
		}
		
		.right span{
			color: var(--color-gray-white);
			height: 8vw;
			align-items: center;
			display: flex;
		}
		
		#Reward {
			height: 7vw;
			width: 14vw;
			border-radius: 1.5vw;
			float: right;
			margin-left: 1.7vw;
			font-weight: 600;
			font-size: 4vw;
			line-height: 6vw;
			color: var(--color-white);
			background-color: var(--color-yellow);
			text-shadow: 0 0 1px sandybrown;
		}
		
		
		
		.content {
			margin-top: 10vw;
		}
		
		#UserInfo {
			
			height: 14vw;
			display: flex;
			align-items: center;
			padding: 1.5vw 5vw 0.5vw 5vw;
			background-color: var(--color-white);
		}
		
		.user-head-img {
			height: 10vw;
			width: 10vw;
			float: left;
			border-radius: 50%;
			border: 1px solid var(--color-gray-light);
			margin-right: 2.2vw;
		}
		
		.user-name {
			float: left;
			margin-right: 2vw;
			font-size: 4vw;
			font-weight: 300;
		}
		
		#QuesCard {
			padding-left: 6vw;
			background-color: var(--color-white);
			border: 1px solid var(--color-white);
		}
		
		#QuesTitleLine {
			margin-top: 2.6vw;
		}
		
		#QuesTitle {
			display: inline;
			font-weight: bold;
			font-size: 1.5rem;
			height: 1rem;
		}
		
		#QuesTitleUnderline {
			height: 1vw;
			width: 27.7vw;
			border-radius: 0.5vw;
			background-color: var(--color-yellow);
		}
		
		#Tags {
			margin: 2.8vw auto;
			display: flex;
		}
		
		#Tags div {
			margin-right: 3.3vw;
			height: 7vw;
			padding: 0 1.5vw;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 0.8rem;
			border: 0.25vw solid var(--color-black);
			border-radius: 1.5vw;
		}
		
		#QuesFooter {
			margin: 3.2vw 0;
		}
		
		#QuesLooked {
			text-align: right;
			font-size: 3.5vw;
			font-weight: 600;
		}
		
		#QuesStatus {
			background-color: var(--color-gray-white);
			padding: 3.3vw 4.44vw;
		}
		
		#QuesText {
			margin: 2vw 0 3.3vw;
			word-wrap: break-word;
			white-space: pre-wrap;
		}
		
		#StatusLine {
			height: 6.6vw;
			text-align: center;
			font-size: 1.25rem;
			color: var(--color-white);
			border-radius: 1.5vw;
		}
		
		#HiddenSection {
			display: none;
		}
		
		.assign-btn {
			height: 5.6vw;
			width: 13.33vw;
			margin: 2.3vw 3.3vw 2.3vw 0;
			float: right;
			text-align: center;
			font-size: 3.5vw;
			font-weight: bolder;
			border: none;
			border-radius: 1.5vw;
		}
		
		.appl-card {
			display: block;
			margin: 3vw;
			padding: 3vw;
			border-radius: 2vw;
			font-weight: 300;
			height: 16vw;
			background-color: var(--color-white);
			border-bottom: 2px solid #F0F0F0;
		}
		
		.ans-card {
			padding: 3.3vw 4.44vw;
			background-color: var(--color-white);
			border-bottom: 1px solid var(--color-gray-white);
		}
		
		.ans-card .anser-info {
			height: 10vw;
			display: flex;
			align-items: center;
			margin-bottom: 3.3vw;
		}
		
		.ans-card .ans-text {
			word-break: break-all;
			white-space: pre-wrap;
		} 
		
		#BtnAppOpen{
			margin-left: 35vw;
			padding-left: 5vw;
			padding-right: 5vw;
			width: fit-content;
			height: 10vw;
			background: var(--color-yellow);
			border-radius: 5vw;
			position: fixed;
			bottom: 50vw;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 2px 2px 5px var(--color-gray-medium);
			font-weight: 700;
			color: var(--color-gray-dark);
		}
		
		.blur{
			  -webkit-filter: blur(10px); 
		       -moz-filter: blur(10px);
		        -ms-filter: blur(10px);    
		            filter: blur(5px);
					height: 50%;
		}
		
	</style>
	
	
	<body>
		<div id="TopAdsBar">
			<img src="img/HanShuAdsLogo.png" id="HanShuAdsLogo">
			<div id="DownloadHanshu">下载 APP</div>
		</div>
		
		<div id="QuestionInfoBar">
			<div id="LeftYellowPart">
				<p class="gray-text" id="QuesLooked">0 浏览</p>
			</div>
			
			<div id="RightGrayPart">
				<div class="right">
					<span>悬赏</span>
					<div id="Reward"></div>
				</div>
			</div>
		</div>
		
		<div class="content">
			<!--用户展示区-->
			<section id="UserInfo">
				<img class="user-head-img circle" id="HeadImg">
				<div class="user-name" id="UserName">用户名</div>
			</section>
			<!--问题展示区-->
			<section id="QuesCard">
				<div id="QuesTitleLine">
					<p id="QuesTitle"> </p>
				</div>
				<div id="QuesTitleUnderline"></div>
				<div id="Tags">
					<div>山西大学</div>
				</div>
				<div id="QuesText" class="note-editor"></div>
<!-- 				<div id="QuesFooter">
					<p class="gray-text" id="QuesLooked">
						0 浏览
					</p>
				</div> -->
			</section>
			<!--状态区-->
			<section id="QuesStatus">
				<div id="StatusLine" style="background-color: var(--color-gray-medium);">待回答</div>
			</section>			
		</div>
		
		<div id="AnswerContent">
			<!--回答区-->
			<section id="QuesAns">
			
			</section>
			<!--HTML模板区-->
			<section id="HiddenSection" style="display: none;">
				<!--回答信息卡-->
				<div class="ans-card">
					<div class="anser-info">
						<img class="user-head-img">
						<span class="user-name"></span>
						<span class="gray-text" style="margin-left: auto;"></span>
					</div>
					<div class="ans-text note-editor">
						<!-- 回答内容 -->
					</div>
				</div>
				<!--抢答用户卡-->
				<div class="appl-card">
					<img src="" class="user-head-img">
					<button class="assign-btn theme-color theme-color-dark-bg">指定</button>
					<span class="user-name" style="line-height: 11vw;"></span>
					<span class="theme-color"></span>
				</div>
			</section>
		</div>
		
		
		<div id="BtnAppOpen">App 内打开</div>
		
	</body>
	
	<script>
		var quesId;
		$(document).ready(function(){
			$.ajax({
				url: 'http://rickonono3.top:13809/',
				data: {
					"quesId": quesId
				},
				dataType: 'json',
				type: 'post',
				success: function(data) {
					if (data["res"] == "ok"){
						ID("QuesTitle").innerText = data["quesTitle"];
						ID("HeadImg").src = SERVER_LOC + data["quesQueserHeadImgLoc"];
						ID("UserName").innerText = data["quesQueserNick"];
						reward = ques["quesReward"];
						if (ques["quesReward"] != 0) {
							ID("Reward").innerText = ques["quesReward"];
						} else {
							ID("Reward").innerText = "无";
							ID("Reward").style.backgroundColor = "#999";
						}
						ID('UserInfo').addEventListener('click', function() {
							JumpToUserIndex(ques["quesQueserId"], "../../");
						});

						ID("QuesText").innerHTML = ques["quesText"];
						ID("QuesLooked").innerText = ques["quesLookedCnt"] + " 浏览";
						}
					}			
				},
				error: function(res) {
					console.log("error");
				},
			});
		});	
	</script>
	
</html>